<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input  style="width: 200px;"   v-model="query.flight_no" placeholder="航班号" class="filter-item"  ></el-input>

      <el-date-picker class="filter-item" value-format="yyyy-MM-dd"
        type="date"
        v-model="query.date"
        placeholder="选择一个日期">
      </el-date-picker>

      <!-- <el-select v-model="type" class="filter-item"  placeholder="请选择">
          <el-option
          v-for="item in mapType"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select> -->
      <el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
      <el-button  v-if="currentAuth.indexOf('1')>=0"  @click="openAddDialog" type="primary" class="filter-item">添加</el-button>
      <el-button  v-if="currentAuth.indexOf('1')>=0"  @click=" editDialogFormVisible = true" type="primary" class="filter-item">编辑</el-button>
      <el-button  v-if="currentAuth.indexOf('1')>=0"  @click="handleMultDel" type="primary" class="filter-item">删除</el-button>
      <el-button style="margin-left: 10px" @click="getRecords" type="primary" class="filter-item">刷新</el-button>

<!--      <el-button v-if="currentAuth.indexOf('5')>=0" @click="download" type="primary" class="filter-item">导出</el-button>-->

<!--      <div v-if="currentAuth.indexOf('4')>=0" class="filter-item">-->
<!--        <el-upload-->
<!--          style="margin-left: 10px"-->
<!--          :action="host+'/guard/importFile?importType=flight&token='+token"-->
<!--          accept=".xls,.xlsx"-->
<!--          :on-success="uploadSuccess"-->
<!--          :on-error="uploadError"-->
<!--          :on-progress="uploadProcess"-->
<!--          :show-file-list="false">-->
<!--          <el-button type="primary">导入</el-button>-->
<!--        </el-upload>-->
<!--      </div>-->

      <!--      <el-button style="margin-left: 10px" @click="handleMultDel" type="danger" class="filter-item">批量删除</el-button>-->
    </div>

    <el-table  @selection-change="handleSelectionChange" v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row v-horizontal-scroll="'always'">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed="left" prop="id" label="ID" min-width="80" />
      <el-table-column prop="flight_no" label="航班号" min-width="150" />
      <el-table-column prop="date" label="出发日期" min-width="150" />
      <el-table-column prop="start_fly_time" label="起飞时间" min-width="100" />
      <el-table-column prop="end_fly_time" label="降落时间" min-width="100" />
      <el-table-column prop="start_airport" label="起飞机场" min-width="150" />
      <el-table-column prop="end_airport" label="降落机场" min-width="150" />
      <el-table-column prop="couple_flight_no" label="返程航班号" min-width="150" />
      <el-table-column prop="get_writer.name" label="创建人" min-width="160" />
      <el-table-column prop="created_at" label="创建时间" min-width="160" />
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog :title="'添加'"  :visible.sync="addDialogFormVisible">
      <el-form ref="form" :model="form" label-width="100px"   >

        <el-form-item label="是否往返：" >
          <el-switch
            v-model="form.is_double"
            active-text="是"
            inactive-text="否">
          </el-switch>
        </el-form-item>

        <el-form-item label="日期：" >
          <el-date-picker
            value-format="yyyy-MM-dd"
            type="dates"
            v-model="form.flight_dates"
            placeholder="选择一个或多个日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="航班号：" >
          <el-input v-model="form.flight_nos[0]"></el-input>
        </el-form-item>

        <el-form-item label="起飞地点：" >
          <el-input v-model="form.start_airport1"></el-input>
        </el-form-item>
        <el-form-item label="降落地点：" >
          <el-input v-model="form.end_airport1"></el-input>
        </el-form-item>
        <el-form-item label="起飞/降落时间" >
          <el-time-picker
            is-range
            v-model="form.fly_time1"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            value-format="HH:mm"
            format="HH:mm"
            >
          </el-time-picker>
        </el-form-item>

        <div v-if="form.is_double">

          <el-form-item label="返航航班号：" >
            <el-input v-model="form.flight_nos[1]"></el-input>
          </el-form-item>

          <el-form-item label="起飞地点：" >
            <el-input v-model="form.start_airport2"></el-input>
          </el-form-item>
          <el-form-item label="降落地点：" >
            <el-input v-model="form.end_airport2"></el-input>
          </el-form-item>
          <el-form-item label="起飞/降落时间" >
            <el-time-picker
              is-range
              v-model="form.fly_time2"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              value-format="HH:mm"
              format="HH:mm" >
            </el-time-picker>
          </el-form-item>
        </div>
        <el-form-item  >
          <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="提示" :visible.sync="editDialogFormVisible" width="50%">
      <div v-for="item in selectId" >
        <template v-for="record in list" >
          <p v-if="record.id==item">
            {{record.date+"---"+record.flight_no+"---"+record.start_airport+"|"+record.start_fly_time+"---"+record.end_airport+"|"+record.end_fly_time}}
          </p>
        </template>
      </div>

      <div>
        <el-time-picker
          is-range
          v-model="edit_fly_time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          value-format="HH:mm"
          format="HH:mm" >
        </el-time-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleMultEdit">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>

import { myGet,myPost,exportXls } from '@/utils/myUtils'
import {getToken} from "@/utils/auth";

const urlUserLst = '/guard/flight/lst';
const urlAddUser = '/guard/flight/add';
const urlGetUser = '/guard/flight/detail';
const urlDeleteUser = '/guard/flight/del';
const urlEditUser = '/guard/flight/edit';
const urlDownloadUser = '/guard/download';

export default {

  data() {
    return {
      selectId:[],
      currentAuth:'',
      token:"",
      host:process.env.VUE_APP_HOST,
      edit_fly_time:[new Date(2024, 6, 10, 0, 1), new Date(2024, 6, 10, 23, 59)],
      query:{
        flight_no:'',
        date:'',
      },
      form:{
        id:0,
        is_double:true,
        flight_nos:['',''],
        flight_dates:[],
        fly_time1:[new Date(2024, 6, 10, 0, 1), new Date(2024, 6, 10, 23, 59)],
        fly_time2:[new Date(2024, 6, 10, 0, 1), new Date(2024, 6, 10, 23, 59)],
        start_airport1:'',
        end_airport1:'',
        start_airport2:'',
        end_airport2:'',
      },
      list: [],
      pagination:{
        total:0,
        page:1,
        pageSize:20,
      },
      listLoading: true,
      addDialogFormVisible:false,
      editDialogFormVisible:false,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  methods: {

    handleMultEdit(){
      let edit_fly_time = this.edit_fly_time
      let ids = this.selectId
      myGet(urlEditUser,{edit_fly_time,ids}).then(res=>{
        if(res.status){
          this.editDialogFormVisible = false
          this.$message.success(res.msg)
          this.getRecords()
        }
      })


    },
    handleMultDel(){
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = this.selectId
        myGet(urlDeleteUser,{ids}).then(res=>{
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    },

    openAddDialog(){
      Object.assign(this.$data.form,this.$options.data().form)
      this.addDialogFormVisible = true
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          myPost(urlAddUser,this.form).then(res=>{
            if(res.status){
              this.$message.success(res.msg);
              this.addDialogFormVisible = false;
              this.getRecords()
            }
          })
        } else {
          this.$message.error('验证失败！');
          return false;
        }
      });
    },

    uploadSuccess(res, file, fileList){
      if(res.status){
        this.$message.success(res.msg)
        this.getRecords();
      }else{
        this.$message.error(res.msg)
      }
    },
    uploadError(err, file, fileList){
      //console.log(err)
    },
    uploadProcess(event, file, fileList){
      //console.log(event)
    },

    download(){
      const url = this.host+urlDownloadUser+"?downloadType=flight"
      exportXls(url);
    },

    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },
    getRecords(){
      this.listLoading = true;
      let params = Object.assign(this.query,this.pagination)
      myGet(urlUserLst,params).then((res) =>{
        this.listLoading = false;
        if(res.status){
          this.list = res.data.records
          this.currentAuth = res.data.currentAuth
          this.pagination.total = res.data.total
        }
      })
    },
    changeStatus(row){
      myPost(urlAddUser,{id:row.id, status:row.status}).then(res => {
        if(res.status){
          this.$message.success(res.msg)
        }
      })
    },

    handleEdit(index, row) {
      this.editDialogFormVisible = true
      this.form.fly_time = [row.start_fly_time,row.end_fly_time]
      this.form.flight_date = row.date
      this.form.start_airport = row.start_airport
      this.form.end_airport = row.end_airport
      this.form.flight_no = row.flight_no
      this.form.id = row.id

    },

    handleDelete(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = row.id
        myGet(urlDeleteUser, { ids }).then(res => {
          if (res.status) {
            this.$message.success(res.msg);
            this.reload();
          }
        })
      })
    },

    handleDownload(index, row){
      let id = row.id
      const url = this.host+urlDownloadUser+"?downloadType=flightDownload&id="+id
      exportXls(url)
    },

    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getRecords();
    },

    handleSelectionChange(val) {
      this.selectId = [];
      val.forEach(item=>{
        this.selectId.push(item.id)
      })
    },

    //多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }
  },
  mounted() {
    this.getRecords()
    this.token = getToken()

    //console.log(this.host)
  }
}
</script>

<style>

.table-img{
  width: 50px;
  height: 50px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
